<template>
  <ul class="sidebar-menu" data-widget="tree">
    <li class="header">Vue AdminLte Sample</li>
    <template v-for="item in menuList">
        <li class="treeview" v-bind:key="item.id">
            <a href="#">
                <i :class="item.menuIcon"></i>
                <span>{{item.menuName}}</span>
                <span class="pull-right-container">
                    <i class="fa fa-angle-left pull-right"></i>
                </span>
            </a>
            <ul class="treeview-menu">
                <li v-for="subItem in item.subMenu" v-bind:key="subItem.id">
                    <a :href="subItem.menuRouter"><i class="fa fa-circle-o"></i> {{subItem.menuName}}</a>
                </li>
            </ul>
        </li>
    </template>
  </ul>
</template>
<script>
export default {
  name: 'SidebarMenu',
  data () {
    return {
      menuList: [
        {
          id: 1,
          menuName: 'Dashboard',
          menuIcon: 'fa fa-dashboard',
          subMenu: [
            {
              id: 101,
              menuName: 'Dashboard v1',
              menuRouter: '../../index.html'
            },
            {
              id: 102,
              menuName: 'Dashboard v2',
              menuRouter: '../../index2.html'
            }
          ]
        },
        {
          id: 2,
          menuName: 'Layout Options',
          menuIcon: 'fa fa-files-o',
          subMenu: [
            {
              id: 201,
              menuName: 'Top Navigation',
              menuRouter: '../layout/top-nav.html'
            },
            {
              id: 202,
              menuName: 'Boxed',
              menuRouter: '../layout/boxed.html'
            },
            {
              id: 203,
              menuName: 'Fixed',
              menuRouter: '../layout/fixed.html'
            },
            {
              id: 204,
              menuName: 'Collapsed Sidebar',
              menuRouter: '../layout/collapsed-sidebar.html'
            }
          ]
        },
        {
          id: 3,
          menuName: '系统管理',
          menuIcon: 'fa fa-laptop',
          subMenu: [
            {
              id: 301,
              menuName: '用户管理',
              menuRouter: '/#/sys/user'
            },
            {
              id: 302,
              menuName: '角色管理',
              menuRouter: '/sys/role'
            }
          ]
        }
      ]
    }
  },
  methods: {}
}
</script>
